<template>
  <!--  -->
  <el-pagination
    v-model:current-page="currentPage"
    class="pagination"
    layout="total, sizes, prev, pager, next, jumper"
    :page-sizes="pageSizes"
    :size="pageSize"
    :total="total"
    @size-change="sizeChange"
    @current-change="currentChange"
  />
</template>

<script>
/**
 * @description: 基于element-ui自定义分页器
 * @param {props} total 总条数
 * @param {method} changePagesize 改变分页器每页大小，返回每页大小
 * @param {method} turnPage 翻页，返回到达页码
 */
export default {
  name: 'BasePagination',
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  emits: ['sizeChange', 'currentChange'],
  data () {
    return {
      currentPage: 1, // 当前页数
      pageSizes: [5, 10, 15, 20], // 每页条数
      pageSize: 5 // 当前每页条数,默认值
    }
  },
  mounted () {},
  methods: {
    init () {

    },
    // 改变分页大小
    sizeChange (e) {
      this.$emit('sizeChange', e)
    },
    // 改变当前页数
    currentChange (e) {
      this.$emit('currentChange', e) // 调用翻页，传入要搜索的页数
    }
  }
}
</script>

<style lang="less" scoped>
.pagination{
  padding: 10px 0px
}
</style>
